<template>
    <div>
        <van-index-bar :index-list="indexList">
            <div v-for="item in dataList" :key="item.cityId">
                <!-- 分栏的标题 -->
                <van-index-anchor :index="item.title" />
                <!-- 具体的城市 -->
                <van-cell v-for="(val, key) in item.data" :key="key" :title="val.name" @click="changeCity(val.cityId,val.name)" />
            </div>
        </van-index-bar>
    </div>
</template>

<script>
import uri from "@/config/uri";
import Vue from "vue";
import { IndexBar, IndexAnchor, Cell } from "vant";

Vue.use(IndexBar);
Vue.use(IndexAnchor);
Vue.use(Cell);
export default {
    // 周期：创建完毕
    created() {
        this.$store.commit("global/setIsShow", false);

        this.$http.get(uri.citiesInfo + "?cors=T").then((res) => {
            if (res.status === 0) {
                // 产生26个字母
                for (var i = 65; i <= 90; i++) {
                    this.charList.push(String.fromCharCode(i));
                }
                // 在取到所有的大写字母后，需要对大写字母进行过滤，保留与城市名称拼音首个字母匹配的城市信息
                this.charList.forEach((el) => {
                    // 用filter过滤
                    let arr = res.data.cities.filter((item) => item.pinyin.substr(0, 1).toUpperCase() == el);
                    // 因为空的数据对应的信息我们是不需要的，因此需要判断
                    if (arr.length) {
                        this.dataList.push({
                            data: arr, // array
                            title: el, // string
                        });
                        // 保存下右侧需要的索引
                        this.indexList.push(el);
                    }
                });
            }
        });
    },
    data() {
        return {
            // 最终在右侧要展示的索引
            indexList: [],
            // 26个字母
            charList: [],
            // 主体数据
            dataList: [],
        };
    },
    methods: {
        changeCity(cityId,cityName) {
            // 保存城市信息
            localStorage.setItem("cityId", cityId);
            localStorage.setItem("cityName", cityName);
            // 跳转
            this.$router.back(-1);
        },
    },
    beforeDestroy(){
        this.$store.commit("global/setIsShow", true);
    }
};
</script>

<style scoped></style>
